<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

    <title>联系人列表</title>
    <link rel="stylesheet" href="__mobile_static__/css/remove_apple.css">
    <link rel="stylesheet" href="__mobile_static__/css/index.css">
    <link rel="stylesheet" href="__mobile_static__/css/chat.css">

    <script src="__static__/js/jquery.min.js"></script>
    <script src="__mobile_static__/js/adapt_window.js"></script>
</head>
<body>
<div id="header" class="mauto">
    <div class="left go_back"></div>
    <div class="left title"><span class="{if condition='$client_user.lineStateNum == 1'}state_on{else}state_off{/if}"></span>{$client_user.nickname}</div>
    <div class="clearfix"></div>
    {if condition="$is_kf neq 1"}
    <img class="mail" src="__static__/images/mail_or.png" onclick="javascript:showMail(1);">
    {/if}

</div>
<div id="msg">
    <div class="getHistoryMsg" id="HistoryMsg" msgid="">点击加载更多消息</div>
    {if condition='$client_user.lineStateNum == 0'}
    <div class="systemMsg ">对方不在线，您可以留言噢。</div>
    {/if}
</div>
<div id="form">
    <div  class="left photo" id="UploadPhoto" onclick="javascript:tailor(1)"></div>

    <textarea class="left" id="textarea"></textarea>
    <div class="right" id="post">发送</div>
    <div class="right" id="clear">清空</div>
    <div class="clearfix"></div>
</div>

<!--图片查看放大容器-->
<div id="MsgPhotoSkim" style="position: fixed;top: 0;z-index: 200;background-color: rgba(0,0,0,0.5);width: 100%;height: 100%;overflow-x:hidden;overflow-y: scroll;display: none;">
    <img src="" id="MsgPhoto" style="max-width: 7.2rem;display: block;margin: 0 auto;margin-top: 0.15rem;">
</div>

<!--图片上传裁剪器-->
<script src="__static__/js/iscroll-zoom.js"></script>
<script src="__static__/js/hammer.js"></script>
<script src="__static__/js/jquery.photoClip.js"></script>
<div id="tailor">
    <div class="bg"></div>
    <img src="__static__/images/close.png" onclick="javascript:tailor(2)" style="width:0.5rem;height:0.5rem;position: absolute;right: 0.5rem;top: 0.5rem;z-index: 3">
    <div class="content">
        <div id="clipArea"></div>
        <div id="see" style="width: 5rem;height: 5rem; display: none"></div>
    </div>
    <style>
        #tailor  .file_box, #clipBtn{
            height: 0.9rem;
            line-height: 0.9rem;
        }
    </style>
    <div class="file_box" style="background-color: #ff5722;">选择图片<input type="file" id="file"></div>
    <button id="clipBtn" style="background-color: #999">确认</button>
    <div id="view" style="display: none"></div>
    <div class="clearfix"></div>
</div>
<script src="__mobile_static__/js/client_tailor.js"></script>
<!--图片上传裁剪器-->

<!--加载进度条-->
<div id="loading">
    <img src="__static__/images/loading.gif" class="img">
</div>
<!--加载进度条-->

{if condition="$is_kf neq 1"}
<!--站内信表单-->
<div id="mailForm">
    <form id="mail">
        <div class="dl"><span>标题:</span><input type="text" name="title" ></div>
        <div class="dl"><span>联系手机号码:</span><input type="text" name="phone" ></div>
        <div class="dl"><span>描述:</span><input type="text" name="description" ></div>
        <div class="dl"><span>具体内容:</span>
            <p><textarea name="content"></textarea></p>
        </div>
        <div><input type="button" value="发送站内信" url="{:url('Mail/add')}" onclick="javascript:sendMail(this);"></div>
        <div><input class="grey" type="button" value="取消" url="{:url('Mail/add')}" onclick="javascript:showMail(0);"></div>

    </form>
</div>
<!--站内信表单-->
{/if}

<!--消息提示音-->
<audio id="chatAudio" controls="controls"  style="display: none" >
    <source src="__static__/mp3/chat.mp3"/>
</audio>
<!--消息提示音-->

</body>
</html>
<script src="__static__/js/base64.js"></script>
<script src="__mobile_static__/js/DocDeal.js"></script>
<script src="__mobile_static__/js/Chat.js"></script>
<script src="__mobile_static__/js/MsgDeal.js"></script>
<script>
    var user_photo = {
        //在线离线状态头像
        userPhotoOnLine : '{$userPhotoOnLine}',
        userPhotoOffLine : '{$userPhotoOffLine}',
        kfPhotoOnLine : '{$kfPhotoOnLine}',
        kfPhotoOffLine : '{$kfPhotoOffLine}',
    }
    //聊天对象
    var Chat = new Chat({
        //消息委托者对象
        MsgObject : new MsgDeal(),
        socket_ip : "{$domain_ip}",
        send_client_id : "{$client_user.enc_client_id}",
        //客户端id绑定该用户
        url_bind_user    : '{:url("bind_user")}',
        //发送文本消息
        url_send_text    : '{:url("send_text")}',
        //发送图片
        url_send_photo   : '{:url("send_photo")}',
        //加载历史记录
        url_loadMsg      : '{:url("getLateMsg")}',
        //转换客服
        url_kfChange     : '{:url("kf/changeKf")}',
        url_autoReply    : '{:url("autoReply")}',
        //用户头像路径
        user_head_photo  : '__mobile_static__/images/',
        //图片基本路径
        photo_base_path  : '',
        //发送凭证
        token            : "{$token}",
        user_photo       :user_photo,
        //某人上线回调函数
        OneOnLine        : OneOnLine,
        //某人下线回调函数
        OneClose         : OneClose,
        //被切换了客服回调函数
        ChangeKf         : when_changkf,
        //加载状态回调函数
        loading          : loading,
        //是否客服
        is_kf            : '{$is_kf}',
        //新消息回调
        newMsgTips : function(){$('#chatAudio')[0].play();},

    });

    //文档处理对象
    var DocumentDeal = new DocDeal({
        Chat : Chat,
    });
    DocumentDeal.start();

    //提问
    function question(id)
    {
        DocumentDeal.question(id);
    }

    //点击放大图片查看
    function Msg_skim_photo(target)
    {
        var target = $(target);
        var width = target.width(),
            height = target.height();
        if(width == 0 || height == 0) return;
        $('#MsgPhoto').attr('src',target.attr('src'));
        $('#MsgPhotoSkim').show();
    }

    //某人上线
    function OneOnLine(data)
    {
        if(data.client_id == data.send_client_id)
        {
            ToSystemnMsg({text:"对方已经上线了，欢迎您进行愉快对话。",online:1});
        }
    }

    //某人下线了
    function OneClose(data)
    {
        if(data.client_id == data.send_client_id)
        {
            ToSystemnMsg({text:"对方不在线，您可以留言噢",online:0});
        }
    }

    //当被切换客服
    function when_changkf(data)
    {
        $('#header .title').html("<span class='state_on'></span>"+data.msg.nickname);
        ToSystemnMsg({text:"客服在忙，当前由 '"+data.msg.nickname+"' 为您服务"});
    }

    function ToSystemnMsg(args)
    {
        /**
         * 参数说明
         * args.text 表示输出系统信息的内容
         * args.online 1表示对方在线，否则不在线，如果未undefined，则不设置在线状态
         */
        $('#msg').append('<div class="systemMsg ">'+args.text+'</div>');

        if(typeof args.online == "undefined") return;

        if(args.online == 1)
        {
            $('#header .title span.state_off').removeClass('state_off').addClass('state_on');
        }
        else
        {
            $('#header .title span.state_on').removeClass('state_on').addClass('state_off');
        }
    }

    //加载状态
    function loading(type)
    {

        if(type)
        {
            //加载中
            $('#loading').show();
        }
        else
        {
            //加载完毕
            $('#loading').hide();
        }
    }

    $('#MsgPhotoSkim').click(function(){
        $(this).hide();
    });

    //发送站内信
    function sendMail(target)
    {
        $.post($(target).attr('url'),$('#mail').serialize(),function(data){
            if(typeof data == 'string')
            {
                data = JSON.parse(data);
            }
            alert(data.msg);
            showMail(0);
        },'json');
    }

    //显示隐藏站内信表单
    function showMail(type)
    {
        if(type == 1)
        {
            $('#mailForm').show();
        }
        else
        {
            $('#mailForm').hide();
        }
    }


</script>